<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!-- 取出部署的应用程序名或者是当前的项目名称 -->
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html lang="zh-CN" class="no-js">
<head>
    <meta charset="UTF-8">
    <title>用户后台</title>

    <%@include file="/WEB-INF/jsp/common/component/head.jsp"%>
    <%--<link rel="stylesheet/less" type="text/css" href="${ctx}/assets/less/theme.less">--%>

</head>

<body class="  ">
    <div class="bg-light dk" id="wrap">
        <div id="top">
            <%@include file="/WEB-INF/jsp/common/component/navbar.jsp"%>
            <%--<%@include file="/WEB-INF/jsp/common/component/header.jsp"%>--%>
        </div><!-- /#top -->

        <div id="left">
            <%@include file="/WEB-INF/jsp/common/component/userMessage.jsp"%>
            <%@include file="/WEB-INF/jsp/common/component/menu.jsp"%>
        </div><!-- /#left -->

        <div class="content" >
            <div class="inner bg-light dk">
                <table id="testTable">
                </table>
            </div><!-- /.inner -->
        </div><!-- /#content -->
    </div><!-- /#wrap -->

    <%@include file="/WEB-INF/jsp/common/component/foot.jsp"%>

<script>
    $('#testTable').bootstrapTable({
        //定义列
        columns: [{
            field: 'id',        //field 变成 data-field 属性
            title: '书籍id',
            checkbox: true,     //设置了 checkbox 后，这列的值不会被显示
            //radio
            titleTooltip: "ercha",  //小提示。鼠标移到到上面会显示
//            class: ""           //类的列名，设定列的风格
//            rowspan: 2,         //该列占几行(无法使用？？)
//            colspan: 2

        },{
            field: 'name',
            title: '书名',
//            align: 'left',         //center/left/right

        },{
            field: 'price',
            title: '价格'
        }],
//        data: []                //定义要初始化的数据，格式和 columns 一样
//        ajax                        //A method to replace ajax call. Should implement the same API as jQuery ajax method
        url: '${ctx}/book/list',    //A URL to request data from remote site.
        method: 'get',           //	The method type to request remote data.
//        cache: true,             //False to disable caching of AJAX requests.默认为 true
//        contentType: 'application/json',  //The contentType of request remote data.
//        dataType: 'json',            //希望服务器返回的数据类型
//        ajaxOptions: {}         //Additional options for submit ajax request. List of values

//        When requesting remote data, you can send additional parameters by modifying queryParams. If queryParamsType = 'limit', the params object contains:
//        limit, offset, search, sort, order Else, it contains:
//        pageSize, pageNumber, searchText, sortName, sortOrder.
//        Return false to stop request.
//        queryParams: function(params){return params;}

//        queryParamsType: 'limit',   //Set 'limit' to send query params width RESTFul type.

//        responseHandler: function(res) {return res;}    //对传送回来的数据进行处理
        striped: true,           //表格加上条纹，默认为 false
        pagination: true,       //是否展示页码，默认为 false
//        pageNumber: 1,          //默认第几页
//        pageSize: 10,           //默认每页行数
//        pageList: [10, 25, 50, 100, All]    //选择每页的行数。如果是 All，展示所有的
        selectItemName: "btn",  //The name of radio or checkbox input.
        search: true,           //搜索框，默认为 false
        showRefresh: true,        //刷新按钮，默认为 false
//        showFooter: true,           //显示页脚
        showColumns: true,        //可以让用户选择要显示的列，默认为 false
        showToggle: true,            //切换表格风格：列表/卡片，默认为 false
        idField: 'id',               //指明那一列是主键
//        cardView: true,              //是否以卡片形式展示，默认为 false
        paginationDetailHAlign: 'right',    //页码字显示的位置,left/right。默认为 left
        clickToSelect: true,             //点击行即可选择 checkbox/radio.默认为 false
//        sortName                        //按哪一列排序
//        sortOrder: 'asc'                    //asc/desc
//        classes: 'table table-hover'     //定义表格样式。可以添加 'table-no-bordered' 来删除表格的边框样式
//        height                      //定义表格的高度，num。默认无定义
//        undefinedText: '-'          //某个单元格无内容显示的字符串
//        iconsPrefix: 'glyphicon'        //使用的图标前缀。如 'glyphicon', 'fa'
//        icons: {}                           //自定义图标 {refresh: 'glyphicon-refresh icon-refresh', toggle: 'glyphicon-list-alt icon-list-alt', columns: 'glyphicon-th icon-th'}
//        maintainSelected: false         //当翻页或者搜索时保持选中的列
//        checkboxHeader: true            //设为 false，则没有选中全部的 checkbox 按钮
//        toolbar: '#toolbar'             //A jQuery selector that indicate the toolbar, for example: #toolbar, .toolbar.
    //        singleSelect: false             //设置 checkbox 仅能选中一行
//        paginationPreText: '<'          //下一页按钮的 text
//        paginationNextText: '>'        //下一页按钮的 text
//        paginationHAlign: 'left',       //页码水平方向显示的位置.left/right(默认为 right)(不知道干嘛的)
//        paginationVAlign: 'top'      //页码垂直方向显示的位置.top/bottom/both
//        toolbarAlign: 'left'        //Indicate how to align the custom toolbar. 'left', 'right' can be used.
//        buttonsAlign: 'left'            //设置 toolbar 按钮的位置（即搜索框那里的）
//        searchAlign: 'left'           //设置搜索框的位置,left/right
//        detailView: true,            //在表格形式中，左边会有加号，点击可以查看详情
//        detailFormatter             //格式化详细页面模式的视图。参数为 function(index, row) { }
//        uniqueId
//        minimumCountColumns: 2          //限制用户至少要展示多少列，默认值为 1
//        showPaginationSwitch: true  //切换展示页码的按钮
//        searchText: '请输入书籍名'    //要搜索的关键字，参数为 search
//        sidePagination: 'server'
//        rowStyle: function(row, index){}    //格式化 row 的风格，row 为这一行的数据，index 为记录的索引。Support classes or css

        //The row attribute formatter function, take two parameters:
        //row: the row record data.
        //index: the row index.
        //Support all custom attributes.
//                rowAttributes: function(row, index){}
    });
</script>

</body>

</html>